<!-- 
    menu菜单组件
    props
        isCollapse 菜单折叠参数
-->
<template>
    <div class="menu">
        <el-scrollbar style="height: 100vh;">
            <!-- 菜单栏部分 -->
            <el-menu :default-active="$route.path" active-text-color="#ffe500" background-color="#304156"
                text-color="#f5f7fa" router :collapse="isCollapse">
                <el-menu-item v-for="itec in menu.slice(0, 1)" :key="itec.name" :index="'/index/' + itec.children[0].path">
                    <el-icon>
                        <i :class="`iconfont ${itec.meta.icon}`"></i>
                    </el-icon>
                    <span>{{ $t(itec.meta.title) }}</span>
                </el-menu-item>
                <template v-for="item in menu.slice(1)" :key="item.name">
                    <el-sub-menu :index="item.path">
                        <template #title>
                            <el-icon>
                                <i :class="`iconfont ${item.meta.icon}`"></i>
                            </el-icon>
                            <span>{{ $t(item.meta.title as string) }}</span>
                        </template>
                        <template v-for="ites in item.children" :key="ites.path">
                            <el-menu-item :index="`/index/${item.path}/${ites.path}`" v-if="!ites.meta.hidden">
                                <template #title>
                                    <span>{{ $t(ites.meta.title as string) }}</span>
                                </template>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>
<script lang="ts" setup>
import menu from '@/router/page'//路由数据
const props = defineProps({ isCollapse: { type: Boolean, default: false } });
console.log(props);
</script>
<style lang="less" scoped>
.el-menu {
    border: 0;

    &:not(.el-menu--collapse) {
        width: 200px;
    }
}
</style>